<template>
  <div style="padding:20px" >
    <el-form :model="queryParams" :inline=true label-width="auto" style="max-width: 600px">
    <el-form-item label="产品单位">
      <el-input v-model="queryParams.name" style="width: 240px" placeholder="请输入检索信息" clearable/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Search" @click="iniPageData">搜索</el-button>
      <el-button type="Search" icon="Refresh" @click="handlerReset">重置</el-button>
    </el-form-item>
  </el-form>
    <el-row>
      <el-button icon="plus" type="primary" plain @click="handleShowSaveDialog">新增</el-button>
      <el-button icon="EditPen" type="success" plain>修改</el-button>
      <el-button icon="delete" type="danger" plain @click="handleBatchDel">删除</el-button>
    </el-row></div>

  <!--    //分页列表展示-->
  <div>
    <el-table @selection-change="handleSelectChange" :data="productUnitList">
      <el-table-column type="selection" width="55" align="center"   />
      <el-table-column label="品牌名称" prop="name" width="200"/>
      <el-table-column label="品牌图标" prop="logo" #default="scope">
        <img :src="scope.row.logo" width="50"/>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleShowUpdateDialog(scope.row)">修改</el-button>
          <el-button link type="primary" icon="Delete" @click="handleShowRemove(scope.row.name,scope.row.id)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total=total
        v-model:page=queryParams.pageNum
        v-model:limit=queryParams.pageSize
        @pagination="iniPageData"
    />
    <!--// 新增、更新对话框-->
    <el-dialog v-model="dialogFormVisible" title="saveUpdateDialogTitle" width="500">
      <el-form>
        <el-form-item label="产品单位" :label-width="formLabelWidth">
          <el-input v-model="newProductUnit.name" autocomplete="off"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="handleSaveOrUpdate">Confirm</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {listProductUnit,saveProductUnit,updateProductUnit,getProductUnitDetails,deleteProductUnit} from '@/api/product/productUnit.js'
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

//1.查列表
  //初始化页面查询
  onMounted(() => {
    iniPageData()
  })
  //条件分页查询
  const iniPageData = async () => {
    const {rows, total: t} = await listProductUnit(queryParams.value)
    productUnitList.value = rows;
    total.value = t;
  }
  //检索条件
  const queryParams = ref({
    pageNum: 1,
    pageSize: 3,
    name: null
  })
  const productUnitList = ref();
  const total = ref();
  //表单重置
  const handlerReset = () => {
    queryParams.value.name = null
    queryParams.value.pageNum = 1
    queryParams.value.pageSize = 3
    iniPageData()
  }


//2.查单个


//3.新增
const saveUpdateDialogTitle =ref("新增产品单位")
const newProductUnit = ref({})
//对话框开关
const dialogFormVisible = ref(false)
//新增按钮函数
const handleShowSaveDialog = () => {
  reset()
  saveUpdateDialogTitle.value="新增品牌"
  dialogFormVisible.value = true
}
//提交表单
const saveNewProductUnit = async () => {
  await saveProductUnit(newProductUnit.value)
  iniPageData()
  ElMessage.success("新增成功")
  dialogFormVisible.value = false
}
//

//新增对话框重置
function reset() {
  newProductUnit.value.name = null
  newProductUnit.value.logo = null
}
//4.修改
const handleShowUpdateDialog=async (row)=>{
  reset()
  saveUpdateDialogTitle.value="更新品牌"
  const {data} = await getProductUnitDetails(row.id)
  newProductUnit.value = data
  dialogFormVisible.value = true

}
const handleUpdate = async  ()=>{
  await updateProductUnit(newProductUnit.value)
  iniPageData()
  ElMessage.success('更新成功')
  dialogFormVisible.value = false
}
//提交新增或修改
const handleSaveOrUpdate = ()=> {
  if (newProductUnit.value.id) {
    //更新
    handleUpdate()
  } else {
    //新增
    saveNewProductUnit()
  }
}
//5.删除
const handleShowRemove=(name,ids)=>{
  ElMessageBox.confirm(

      `正在删除品牌 ${name},是否继续?`,
      '删除确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        await deleteProductUnit(ids)
        ElMessage.success("删除成功")
        //刷新页面数据
        iniPageData();
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消删除',
        })
      })
}
//多选
const selectRows = ref([]) //接收选中要删除行的变量
const handleSelectChange = (newSelection) => {
  // console.log('表格选中行变化了：',newSelection)
  selectRows.value = newSelection;
}
const handleBatchDel = () => {
  //1、判断是否选中了要删除的记录
  if (!selectRows.value || selectRows.value.length === 0) {
    ElMessage.warning('请选择要删除的行')
    return
  }
  //2、获取选中记录的id列表 拼接为 逗号分割的字符串
  let ids = selectRows.value.map(row => row.id).join(',')
  let names = selectRows.value.map(row => row.name).join('、')
  // console.log(ids)
  //3、调用上面的函数删除
  handleShowRemove(names, ids)}
//const brandsDelete = ref([])
</script>

<style scoped>

</style>